import React, {Component} from 'react'
import {View, Button, Text, Alert, StyleSheet, Image} from 'react-native'

import TabNavigator from 'react-native-tab-navigator';

var FindMainView = require('./Find/FindMainView');
var HomeMainView = require('./Home/HomeMainView');
var MeMainView = require('./Me/MeMainView');
var SiftMainView = require('./Sift/SiftMainView');


var image1 = require('./image/icon_tabbar_homepage.png');
var image1_1 = require('./image/icon_tabbar_homepage_selected.png');
var image2 = require('./image/icon_tabbar_misc.png');
var image2_1 = require('./image/icon_tabbar_misc_selected.png');
var image3 = require('./image/icon_tabbar_merchant_normal.png');
var image3_1 = require('./image/icon_tabbar_merchant_selected.png');
var image4 = require('./image/icon_tabbar_mine.png');
var image4_1 = require('./image/icon_tabbar_mine_selected.png');


class MainView extends Component {

    constructor(props) {
        super(props)
        this.state = {
            selectedTab: '首页',
        }
    }

    render() {
        return (

            <View style={styles.container}>
                <TabNavigator>
                    {this.getBottmView('首页', image1, image1_1, HomeMainView)}
                    {this.getBottmView('发现', image2, image2_1, FindMainView)}
                    {this.getBottmView('精选', image3, image3_1, SiftMainView)}
                    {this.getBottmView('我的', image4, image4_1, MeMainView)}
                </TabNavigator>
            </View>
        )


    }

    getBottmView(title, icon, selectIcon, HomeMainView) {
        return (
            <TabNavigator.Item
                selected={this.state.selectedTab === title}
                title={title}
                titleStyle={styles.tabText}
                selectedTitleStyle={styles.selectedTabText}
                renderIcon={() => <Image style={styles.icon} source={icon}/>}
                renderSelectedIcon={() => <Image style={styles.icon} source={selectIcon}/>}
                onPress={() => this.setState({selectedTab: title})}>
                <HomeMainView navigations={this.props.navigation.navigate}/>
            </TabNavigator.Item>

        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row'
    },
    tabText: {
        color: "#666666",
        fontSize: 13
    },
    selectedTabText: {
        color: "#ff8a00",
        fontSize: 13
    },
    icon: {
        width: 25,
        height: 25
    }
});

module.exports = MainView;